<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>其他</title>	
		<link rel="stylesheet" href="layui/css/layui.css" media="all">
		<script src="js/jquery-3.1.1.min.js"></script>
		<script src="layui/layui.js"></script>
		<script src="layui/lay/modules/form.js"></script>
		<script src="layui/lay/modules/element.js"></script>
		<script src="http://cdn.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
		<script src="js/roslib.js"></script>		
		<script type="text/javascript">
			layui.use('element', function(){
				var num =2;
				var element = layui.element(); //Tab的切换功能，切换事件监听等，需要依赖element模块			  
			    $("#addTap").click(function(){
			    	element.tabAdd('demo', {
						title: '新选项#'+ num,
				        content: '',
				        id: 'tap-'+num
					})
					num++;
			    })
			})
			function save(){
				layer.open({
					title : '保存坐标',
					type : 1,
					btn : ['保存','取消'],
					btnAlign: 'c',
					closeBtn : 2,
					anim : 3,
					content : '<span>名称：</span><input type="text" placeholder="输入当前坐标名称" id="name">',
					yes : function(index){
						if(!($('#name').val())){
							layer.alert('请输入坐标名称！');
							return;
						}
						$.ajax({
							url : 'http://192.168.1.115/main/coordinate.php',
							type : 'get',
							dataType : "jsonp",
							jsonp:'callback', 
							jsonpCallback:"successCallback",
							data :{'x':$('#robot-x').val(),'y':$('#robot-y').val(),'name':$('#name').val()},
							success : function(){
								layer.alert('保存成功');
								layer.close(index);
							},
							error: function () {
								layer.alert('保存失败');
								layer.close(index);
							},
						});
					}
				})
			}
			var ros = new ROSLIB.Ros();
			ros.connect('ws://192.168.1.115:9090');
			function showMenu(){
				$('.widgets').toggle('drop');
			}			
				           
			function subscriber(){
				$('.topic').show('slide');
				$('.topic-cont').empty();
				var	str  ='<p>主题订阅</p>';
					str +='<select id="topic-list"><option value="">--选择要订阅的主题</option></select>';
					str +='<p>Array show limit</p>'
					str +='<input type="text" value="10">';
					str +='<p>Value show limit</p>'
					str +='<input type="text" value="50">';
				$('.topic-cont').append($(str));
				ros.getTopics(function(params) {					
			    	for(i in params.topics){
			    		var topic = '<option value='+(i+1)+'>'+params.topics[i]+'</option>';
			    		$('#topic-list').append($(topic));
			    	}
			  	});
				$('.widgets').toggle('drop');
			}
			function pulisher(){
				$('.topic').show('slide');
				$('.topic-cont').empty();
				var	str  ='<p>名称</p>';
					str +='<input type="text">';
					str +='<p>类型</p>'
					str +='<input type="text">';
				$('.topic-cont').append($(str));
				$('.widgets').toggle('drop');
			}
			
		 	var odom = new ROSLIB.Topic({
			    ros : ros,
			    name : '/odom',
		    	messageType : 'nav_msgs/Odometry'
		  	});
		 	odom.subscribe(function(message) {
		 	    console.log('Received message on ' + odom.name + ': ' + message.pose.pose.position.x);
		 	    $('#robot-x').val(message.pose.pose.position.x);
		 	   	$('#robot-y').val(message.pose.pose.position.y);
	 	   		odom.unsubscribe();
	 	  	})
		</script>
	</head>
	<body>
		<div class = 'header'>
			<button onclick="showMenu();">窗口</button>
			<!-- <button id = 'addTap'>新增Tab</button> -->
		</div>
		<div class = 'widgets' hidden>
			<h2>窗口</h2>
			<h3>ROS基础</h3>
			<p onclick="subscriber();">#1 - 主题订阅</p>
			<p onclick="pulisher();">#2 - 主题发布</p>
		</div>
		<div class= 'topic' hidden>
			<h2>设置</h2>
			<div class = 'topic-cont'></div>
			<button class="layui-btn layui-btn-radius layui-btn-small layui-btn-normal">刷新</button>
			<button class="layui-btn layui-btn-radius layui-btn-small layui-btn-primary" onclick="$('.topic').hide('slide');">取消</button>
			<button class="layui-btn layui-btn-radius layui-btn-small">确认</button>
			<button class="layui-btn layui-btn-radius layui-btn-small layui-btn-danger" onclick="$('.topic').hide('slide');">删除</button>
		</div>
		<div class="layui-tab" lay-filter="demo" lay-allowclose="true">
	  		<ul class="layui-tab-title">
	  			<li class="layui-this" lay-id="tap-1">新选项#1</li>
		  	</ul>
		  	<div class="layui-tab-content">
		  		<div class="layui-tab-item layui-show">
		  			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
						<legend>当前坐标</legend>
					</fieldset>
					<form class="layui-form" action="">
						<div class="layui-form-item">
					    	<div class="layui-inline">
				      			<label class="layui-form-label">x：</label>
				      			<div class="layui-input-inline">
					        		<input autocomplete="off" class="layui-input" type="text" id = 'robot-x'>
				      			</div>
					    	</div>
					    	<div class="layui-inline">
					      		<label class="layui-form-label">y：</label>
					      		<div class="layui-input-inline">
					        		<input autocomplete="off" class="layui-input" type="text" id = 'robot-y'>
					      		</div>
					    	</div>
					    	<button class="layui-btn layui-btn-radius" type="button" onclick="save()">保存</button>
					  	</div>
					</form>
		  		</div>
	  		</div>
		</div>
	</body>
</html>
